<template>
	<view class="navigationBox" :style="{
		'background-color':`rgba(${r},${g},${b},${a})`
	}">
	<view class="innerBox">
		<!-- 头部导航栏组件 -->
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<view class="contain">
			<view class="left">
				<u-icon name="arrow-left" hover-class='hoverClass' class="hoverClass" v-if="isBack" @click="back" size="36" style="margin-left: 15rpx;"></u-icon>
				<!-- 左部插槽 -->
				<slot name="left"></slot>
				<text class="title">{{navigationTitle}}</text>
			</view>
			<view class="center">
				<!-- 中间插槽 -->
				<slot name="center"></slot>
			</view>
			<view class="right">
				<!-- 右部插槽 -->
				<slot name="right"></slot>
				<u-icon name="home" hover-class='hoverClass' class="hoverClass" v-if="isHome" @click="backHome" size="36" style="margin-left: 30rpx;margin-right: 30rpx;"></u-icon>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		props:{
			// 是否显示返回按钮
			isBack:{
				type:Boolean,
				default:()=>false
			},
			// 是否回到首页
			isHome:{
				type:Boolean,
				default:()=>false
			},
			// 回到首页地址
			homeUrl:{
				type:String,
				default:()=>""
			},
			navigationTitle:{
				type:String,
				default:()=>""
			}
		},
		data(){
			return{
				r:0,
				g:0,
				b:0,
				a:0
			}
		},
		methods:{
			touchNo(e){
				// e.preventDefault()
			},
			back(){
				if(this.$store.state.machineClassShow){
					this.$store.commit("set_machineClassShow",false)
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			},
			backHome(){
				uni.switchTab({
					url:"/pages/viewPort/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
$navgigationH: 150rpx;

.navigationBox{
	position: fixed;
	top: -1rpx;
	left: 0;
	width: 100%;
	color: #fff;
	z-index: 500;
	height: $navgigationH;
	background-image: url("/static/images/bg.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	transform:translateZ(0);
	.innerBox{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.contain{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: calc( 100% - var(--status-bar-height) );
		.left{
			display: flex;
			align-items: center;
			flex-grow: 1;
			.title{
				font-size: 36rpx;
				margin-left: 30rpx;
			}
		}
		.center{
			width: 50%;
		}
		.right{
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
}
.hoverClass{
	transition: .1s;
}
.hoverClass:active{
	color: #999;
}
</style>
